<template>
  <a-modal v-model:open="bindVisible" :title="title" @ok="handleOk">
    <div>{{ prop }}</div>
    <slot name="default" :data="slotData"></slot>
    <slot name="footer" :data="slotData"></slot>
  </a-modal>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { inject } from 'vue'

const props = defineProps({
  visible: Boolean,
  title: String,
  prop: String
})

const emit = defineEmits(['update:visible', 'loadList'])
const bindVisible = useVModel(props, 'visible', emit)
const injectedData = inject('appData')

const slotData = {
  type: 'slot-content',
  timestamp: Date.now()
}

const handleOk = () => {
  bindVisible.value = false
  emit('loadList')
}

defineExpose({
  getInfo: () => ({
    injectedData,
    slotData
  })
})
</script>